<template>
	<!-- 收支汇总 -->
	<view class="sumexpenses">
		<view class="sumexpenses-header">
			<view class="datePicker">
				<picker mode="date" @change="startDateChange">
					<view class="date-text">
						<text class="date">{{startDate}}</text>
						<text class="icon iconfont icon-xiangyoujiantou"></text>
					</view>
				</picker>
				<view class="center-text">至</view>
				<picker mode="date" @change="endDateChange">
					<view class="date-text">
						<text class="date">{{endDate}}</text>
						<text class="icon iconfont icon-xiangyoujiantou"></text>
					</view>
				</picker>
			</view>
			<view class="sumProfit" v-if="showIncome">
				<view class="sumProfit-num">{{inture.profitPrice}}</view>
				<view class="sumProfit-text">共计利润</view>
			</view>
		</view>
		<view class="expendses">
			<view class="expendses-num">
				<text class="expendses-text">支出笔数：</text>
				<text class="count">{{inture.total}}</text>
			</view>
			<view class="expendses-num">
				<text class="expendses-text">支出：</text>
				<text class="count">{{showIncome?inture.outPrice:inture.price}}</text>
			</view>
		</view>
		<view class="expendses" v-if="showIncome">
			<view class="expendses-num">
				<text class="expendses-text">收入笔数：</text>
				<text class="count">{{inture.total}}</text>
			</view>
			<view class="expendses-num">
				<text class="expendses-text">收入：</text>
				<text class="count">{{inture.inPrice}}</text>
			</view>
		</view>
		<view class="content">
			<none v-if="inture.list.length==0"></none>
			<view v-else-if="!showIncome" class="content-info" v-for="(item,index) in inture.list" :key="index">
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">共支出:</text>
					<text class="alltotal">{{item.allTotal}}</text>
				</view>
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">回收员：</text>
					<text>{{item.collectorName}}</text>
				</view>
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">收入时间：</text>
					<text>{{item.finishtime}}</text>
				</view>
				<view class="list">
					<view class="list-title">核验清单：</view>
					<view class="finishedMain-type">
						<view class="tobePacked-type" v-for="(i,k) in item.content" :key="k">
							<view class="type-title">{{i.firstVal}},{{i.secondVal}}</view>
							<view class="type-content">
								<view class="content-number num">数量：{{i.number}}{{i.unit}}</view>
								<view class="content-number">回收币：{{i.user_price}}<text>/</text>{{i.unit}}</view>
								<view>小计：{{i.price}}回收币</view>
							</view>
						</view>
					</view>
				</view>
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">订单编号：</text>
					<text>{{item.logno}}</text>
				</view>
			</view>
			<view v-else class="contentRecycler-info" v-for="(item,index) in inture.list" :key="index">
				<view class="lirun">
					<text class="lirun-title">利润</text>
					<text class="lirun-text">{{item.profit}}</text>
				</view>
				<view class="shouzhi">
					<view class="zhuchu">
						<text class="zhichu-title">支出</text>
						<text class="zhichu-text">{{item.total}}</text>
					</view>
					<view class="shouru">
						<text class="shouru-title">收入</text>
						<text class="shouru-text">{{item.collector_total}}</text>
					</view>
				</view>
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">用户:</text>
					<text class="alltotal">{{item.nickname}}</text>
				</view>
				<view class="contentInfo-detail">
					<text class="contentInfo-detail-text">收入时间:</text>
					<text class="alltotal">{{item.finishtime}}</text>
				</view>
				<view class="list">
					<view class="list-title">实际回收：</view>
					<view class="finishedMain-type">
						<view class="tobePacked-type" v-for="(i,k) in item.content" :key="k">
							<view class="type-title">{{i.firstVal}},{{i.secondVal}}</view>
							<view class="type-content">
								<view class="content-number num">数量：{{i.number}}{{i.unit}}</view>
								<view class="content-number">回收币：{{i.user_price}}<text>/</text>{{i.unit}}</view>
								<!-- <view>小计：{{i.price}}回收币</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateUtil from "@/component/commen/api/getDate.js"
	import util from "../../component/commen/api/util";
	import none from "@/otherPages/none/none.vue"
	export default {
		components: {
			none
		},
		data() {
			return {
				date: "", //选择的时间
				startDate: "", //开始日期
				endDate: "", //结束日期
				dateType: "", //类型id;1:周,2:月,3:季,4:年
				inture: {
					list: []
				}, //收支数据
				showIncome: false, //是否显示收入
			};
		},
		onShow() {
			this.getDate()
		},
		onLoad(e) {
			console.log("点击进入的类型id:", e.type)
			this.dateType = e.type
			if (e.text) {
				this.showIncome = true
			}
		},
		methods: {
			startDateChange(value) { //选择开始日期
				console.log("选择的日期：", value.detail.value)
				this.startDate = value.detail.value
			},
			endDateChange(value) { //选择结束日期
				console.log("结束日期：", value.detail.value)
				this.endDate = value.detail.value
			},
			getDate() {
				// 定义日期类型与对应方法的映射关系
				const dateTypeMap = {
					1: 'getWeekDate',
					2: 'getMounthDate',
					3: 'getQuaterDate',
					4: 'getYearDate'
				};

				// 根据日期类型获取起始日期和结束日期
				if (dateTypeMap.hasOwnProperty(this.dateType)) {
					const {
						startDate,
						endDate
					} = dateUtil[dateTypeMap[this.dateType]]();
					this.startDate = startDate;
					this.endDate = endDate;
				} else {
					console.error('未知的日期类型:', this.dateType);
				}

				// 打印默认的起始日期和结束日期
				console.log("默认开始日期：", this.startDate);
				console.log("默认截至日期：", this.endDate);
				this.getInture()
			},
			getInture() { //获取数据
				if (!this.showIncome) {
					var params = {
						do: "pack",
						op: "logList",
						packid: uni.getStorageSync("packid"),
						type: this.dateType,
						start: this.startDate,
						end: this.endDate,
						// page:1,
						// psize:5
					}
				} else {
					var params = {
						do: "collector",
						op: "logList",
						collectorid: uni.getStorageSync("collectorid"),
						type: this.dateType,
						start: this.startDate,
						end: this.endDate,
						page: "",
						psize: ""
					}
				}
				util.requestWithSign(params).then(res => {
					console.log("返回的数据：", res)
					this.inture = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sumexpenses {
		padding-bottom: 30rpx;

		.sumexpenses-header {
			background: #fff;
			padding: 20rpx 0;
			box-sizing: border-box;

			.datePicker {
				// border: 1px solid #000;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: center;

				.date-text {
					font-size: 25rpx;
					width: 220rpx;
					padding: 10rpx 0;
					text-align: center;
					border-radius: 34rpx;
					border: #eeeeef solid 2rpx;
					background-color: #f7f7f7;

					.date {
						color: #ef8024;
						margin-right: 20rpx;
					}

					.icon {
						font-size: 22rpx;
					}
				}

				.center-text {
					font-weight: bold;
					margin: 0 20rpx;
				}
			}

			.sumProfit {
				text-align: center;
				margin-top: 20rpx;

				.sumProfit-num {
					font-size: 30rpx;
					font-weight: bold;
					color: #ef8024;
				}

				.sumProfit-text {
					margin-top: 10rpx;
					color: #9b9b9c;
				}
			}
		}

		.expendses {
			margin-top: 20rpx;
			display: flex;

			.expendses-num {
				text-align: center;
				flex: 1;

				.expendses-text {
					font-size: 25rpx;
				}

				.count {
					font-weight: bold;
				}
			}
		}

		.content {
			.content-info {
				margin-top: 20rpx;
				background: #fff;
				border-radius: 20rpx;

				.contentInfo-detail {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f6f6f6;

					.alltotal {
						color: #ffc506;
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.contentInfo-detail-text,
				.list-title {
					margin-right: 20rpx;
				}

				.list {
					padding: 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f6f6f6;

					.finishedMain-type {
						.tobePacked-type {
							margin-top: 35rpx;

							// border: 1px solid #000;
							.type-title {
								font-weight: bold;
							}

							.type-content {
								font-size: 25rpx;
								color: #868686;
								margin-top: 20rpx;
								display: flex;

								.num {
									color: #666666;
									font-weight: bold;
								}

								.content-number {
									margin-right: 30rpx;
								}
							}
						}
					}

				}
			}

			.contentRecycler-info {
				background: #fff;
				margin-top: 20rpx;
				.lirun {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f6f6f6;

					.lirun-text {
						font-weight: bold;
						color: #00b388;
					}
				}

				.shouzhi {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f6f6f6;
					display: flex;

					.zhuchu {
						margin-right: 100rpx;

						.zhichu-text {
							margin-left: 20rpx;
							font-weight: bold;
							color: #ffc506;
						}
					}

					.shouru {
						.shouru-text {
							margin-left: 20rpx;
							font-weight: bold;
							color: #00b388;
						}
					}
				}

				.contentInfo-detail {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f6f6f6;

					.contentInfo-detail-text {
						margin-right: 20rpx;
					}
				}

				.list {
					padding: 20rpx;
					box-sizing: border-box;

					.finishedMain-type {
						.tobePacked-type {
							margin-top: 35rpx;

							// border: 1px solid #000;
							.type-title {
								font-weight: bold;
							}

							.type-content {
								font-size: 25rpx;
								color: #868686;
								margin-top: 20rpx;
								display: flex;

								.num {
									color: #666666;
									font-weight: bold;
								}

								.content-number {
									margin-right: 30rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>